<!DOCTYPE html>
<html>
<head>
<title>Street View Planets</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<link rel="stylesheet"
    type="text/css" href="/css/smoothness/jquery-ui-1.8.8.custom.css" />
<link href="/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.8.custom.min.js"></script>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/js/jquery.watermarkinput.js"></script>
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="/js/svp.js"></script>
</head>

<body>
<div id="container" align="center">
  <div id="title">
    <h1>Street View Planets</h1>
    <!-- <h2>by Jack Valmadre</h2> -->
  </div>

  <div class="section">
    <div class="step ui-corner-all">
      Step 1: Find a location in Google Street View
    </div>

    <div class="subsection">
      <form id="addressForm">
        <input type="text" id="addressText" />
        <input type="submit" id="findButton" value="Search" /> 
      </form>
    </div>

    <div id="addressErrorDiv" class="subsection">
      <div id="addressError" class="error ui-corner-all ui-state-error"></div>
    </div>

    <div class="subsection">
      <div id="mapCanvas" class="canvas"></div>
      <div id="panoCanvas" class="canvas"></div>
      <!-- <div id="panoText">Preview</div> -->
      <div style="clear: both;"></div>
    </div>
  </div>

  <div class="section">
    <div class="step ui-corner-all">
      <form id="planetForm">
        <div style="vertical-align: middle; display: inline;">Step 2:</div>
        <input id="planetButton" type="submit" value="Generate a planet" /> 
      </form>
    </div>

    <div id="planetErrorDiv" class="subsection">
      <div id="planetError" class="error ui-corner-all ui-state-error"></div>
    </div>

    <div id="loadingDiv" class="subsection">
      <img id="ajaxLoader" src="/images/ajax-loader.gif" />
      <div id="loadingText"></div>
    </div>

    <div id="planetDiv" class="subsection">
      <div id="planetContainer"><img id="planetImage" /></div>
    </div>
  </div>
</div>
</body>
</html>

